<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>high light picture</title>
<script src="http://style.alibaba.com/js/ae.js"></script>
</head>
<body>

<style>
	* { margin:0; padding:0; }
	img { border:0; }
	#container { width:821px; margin:30px auto; position:relative; }
	#container .pro_img { position:absolute; }
	#container .img1 { top:0; left:0; }
	#container .img2 { top:0; left:270px; }
	#container .img3 { top:210px; left:270px; }
</style>

<div id="container">
	<a class="pro_img img1" href="/"><img src="1.jpg" width="270" height="420" /></a>
	<a class="pro_img img2" href="/"><img src="2.jpg" width="551" height="210" /></a>
	<a class="pro_img img3" href="/"><img src="3.jpg" width="551" height="210" /></a>
</div>

<script>
	( function() {
		var container = YUD.get( "container" ),
			imgList = container.getElementsByTagName( "a" );
		
		for ( var i = 0, len = imgList.length; i < len; i++ ) {
			var item = imgList[ i ],
				itemImg = YUD.getFirstChild( item ),
				width = itemImg.width + 'px',
				height = itemImg.height + 'px',
				maskDiv = document.createElement( "div" );
				
			YUD.setStyle( maskDiv, "position", "absolute" );
			YUD.setStyle( maskDiv, "top", 0 );
			YUD.setStyle( maskDiv, "left", 0 );
			YUD.setStyle( maskDiv, "width", width );
			YUD.setStyle( maskDiv, "height", height );
			YUD.setStyle( maskDiv, "backgroundColor", "#000000" );
			YUD.setStyle( maskDiv, "opacity", 0 );
			YUD.setStyle( maskDiv, "cursor", "pointer" );
			item.appendChild( maskDiv );
		}

	} )();

	( function() {
		var container = YUD.get( "container" ),
			imgList = container.getElementsByTagName( "a" );

		YUE.on( container, "mouseover", function( e ) {
			var target = YUE.getTarget( e );

			for ( var i = 0, len = imgList.length; i < len; i++ ) {
				var item = imgList[ i ],
				maskDiv = YUD.getLastChild( item );
				if ( maskDiv !== target ) {
					var anim = new YAHOO.util.Anim( maskDiv, {
						opacity: { to: 0.3 }
					}, 1, YAHOO.util.Easing.easeOut ); 
					anim.animate();
				}
			}
		} );

		YUE.on( container, "mouseout", function( e ) {
			for ( var i = 0, len = imgList.length; i < len; i++ ) {
				var item = imgList[ i ],
					maskDiv = YUD.getLastChild( item );

				var anim2 = new YAHOO.util.Anim( maskDiv, {
					opacity: { to: 0 }
				}, 1, YAHOO.util.Easing.easeOut ); 
				anim2.animate();
			}
		} );
	} )();
</script>

</body>
</html>
